<template>
    <div>
        <postDetailHeader :post="post"></postDetailHeader>
        <!-- 把一篇文章的数据post整个传进去 -->
        <div class="mainContent">
            <video 
                src="https://video.pearvideo.com/mp4/adshort/20191031/cont-1617802-14542116_adpkg-ad_hd.mp4" 
                class="video"
                controls="controls"
                :poster="post.cover[0].url"
                v-if="post.type ==2">
                </video>
            <div class="title">{{post.title}}</div>
            <div class="info" v-if="post.user">
                {{post.user.nickname}} 2019-10-31
            </div>
            <div class="content" v-html="post.content" v-if="post.type!=2"></div>
            <div class="actionBtns">
                <div class="like" @click="like">
                    <span class="iconfont icondianzan" :class="{
                    red:post.has_like
                        }"></span>
                   {{post.like_length}}
                </div>
                <div class="wechat">
                    <span class="iconfont iconweixin"></span>
                    <a href="https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Explanation_of_interface_privileges.html">
                    微信
                    </a>
                </div>
            </div>
        </div>
        <div class="comments">
            <h2 class="title">精彩跟帖</h2>
            <div class="emptyComment" v-if="comments.length==0">
                暂无跟帖，抢占沙发
            </div>
            <div class="comment" v-else>
                <!-- 遍历每一条评论 -->
                <comment 
                :commentItem="item" 
                v-for="(item,index) in comments" :key="index"
                @reply="reply"/>
                <div class="btnMoreComments" @click="toMoreComments">更多跟帖</div>
            </div>
        </div>
        <postDetailFooter :post="post" :isActive="replyActive" :replyObj="replyObj" @newComment="getComments"></postDetailFooter>
    </div>
</template>

<script>
import postDetailHeader from '../components/postDetailHeader'
import postDetailFooter from '../components/postDetailFooter'
import comment from '../components/comment'
export default {
    components:{
        postDetailHeader,
        postDetailFooter,
        comment
    },
    data(){
        return{
            postId :this.$route.params.id,
            post:{},
            replyActive:false,
            replyObj:{},
            comments:[]
        }
    },
    methods:{
        reply(replyObj){
            console.log('点击了id为'+replyObj.id+'回复按钮');
            // 收到子组件的自定义事件然后触发我们的需要，弹起回复框
            this.replyActive=true;
            this.replyObj = replyObj;
        },
        like(){
            this.$axios({
                url:'/post_like/'+this.post.id,
                method:'get',
                headers:{
                 Authorization: localStorage.getItem('token')
                }
            }).then(res=>{
                console.log(res.data);
                const {message} = res.data;
                if(message =="点赞成功"){
                    this.post.has_like = true;
                    this.post.like_length +=1;
                }else if(message == "取消成功"){
                    this.post.has_like =false;
                    this.post.like_length -=1;
                }
            })
        },
        toMoreComments(){
            this.$router.push({
                name:'moreCommentsPage',
                params:{
                    id:this.postId
                }
            })
        },
        getComments(){
            this.$axios({
                url:'/post_comment/'+this.postId,
                method:'get',
                // 带上所要求显示数据量
                params:{
                    pageSize:3
                },
                headers:{
                 Authorization: localStorage.getItem('token')
                }
            }).then(res=>{
                const {data} = res.data;
                // console.log(data);
                // data就是我们想要的一篇文章的评论数组
                this.comments = data;
            })
        }
    },
    mounted(){
        // 马上获取动态路径传进来的文章id
        // 发送请求渲染页面
        this.$axios({
            url:'/post/' +this.postId ,
            method:'get',
            headers:{
                 Authorization: localStorage.getItem('token')
            }
        }).then(res=>{
            const {data} = res.data;
            this.post = data;
            console.log(this.post);
        })

        // 获取回复数据
        this.getComments();
    }
}
</script>

<style lang="less" scoped>
    .mainContent{
        padding: 2.778vw;
    }
    .title{
        font-size: 5.556vw;
        color: #333;
    }
    .info{
        margin: 5.556vw;
    }
    .content{
        padding-bottom: 16.667vw;
        /deep/ img {
            max-width: 100%;
        }
    }
    .video{
        width: 100%;
    }
    .actionBtns{
        margin: 5.556vw 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .like,.wechat{
            width: 16.667vw;
            border: 1px solid #333;
            height: 8.333vw;
            line-height: 8.333vw;
            text-align: center;
            border-radius: 4.167vw;
            padding: 0 4.167vw;
             .iconfont {
                margin-right: 3px;
            }
        }
        .wechat {
            .iconfont {
                color: #00c800;
            }
        }
    }
    .comments{
        padding-bottom: 22.222vw;
        border-top: 5px solid #eee;
        .title{
            padding-top: 11.111vw;
            font-weight: normal;
            text-align: center;
        }
        .emptyComment{
            height: 27.778vw;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #888;
            font-size: 14px;
        }
          .btnMoreComments {
            height: 8.333vw;
            line-height: 8.333vw;
            text-align: center;
            border: 1px solid #333;
            width: 33.333vw;
            border-radius: 4.167vw;
            margin: 8.333vw auto 0;
        }
    }
    .red{
        color: red;
    }
</style>